<template>
  <div class="PublishComment">
    <div class="wrapper">
      <div class="header">
        <router-link
          tag="div"
          to="/my"
          class="header_left iconfont icon-guanbi"
        ></router-link>
        <div class="header_center">发表评价</div>
        <div class="header_right" @click="release">发布</div>
      </div>
      <div class="bodyer">
        <div class="img">
            <img :src="productImg" alt="">
        </div>
        <div class="bodyer_top">
            <p class="type">分类：{{bigtitle}}</p>
            <div class="score">
                <div class="star">
                    <p>评分：</p>
                <van-rate v-model="value" color="#fc9632" />
                </div>
                <p>{{well}}</p>
            </div>
        </div>
        <div class="bodyer_center">
            <!-- <input class="inp" type="text"> -->
            <textarea name="" id="" placeholder="从多个角度评价，可以帮助更多的人" cols="30" rows="10" v-model="text"></textarea>
        </div>
        <div class="bodyer_bottom">
            <van-uploader v-model="fileList" multiple  />
            <!-- :after-read="afterRead" -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
        value: 0,
        well:"",
        text:"",
        fileList: [],
        productId:null,
        productImg:null,
        bigtitle:null,
        Mycomments:[],
        Toevaluated:null,
        index:null,
        year:null,
        month:null,
        day:null,
        hours:null,
        minutes:null,
        seconds:null,
    };
  },
  methods:{
    // afterRead(file) {
    //   // 此时可以自行将文件上传至服务器
    // //   console.log(file.content);
    //   this.fileList.push(file.content)
    // },
    release(){
      let today=new Date()
        this.year=today.getFullYear()
        this.month=today.getMonth()+1
        this.day=today.getDate()
        this.hours=today.getHours()
        this.minutes=today.getMinutes()
        this.seconds=today.getSeconds()

        if (JSON.parse(localStorage.getItem("Mycomments"))) {
          this.Mycomments = JSON.parse(localStorage.getItem("Mycomments"));
        } else {
          this.Mycomments = [];
        }
        this.Mycomments.push({
            text:this.text,
            fileList:this.fileList,
            value:this.value,
            productId:this.productId,
            bigtitle:this.bigtitle,
            year:this.year,
            month:this.month,
            day:this.day,
            hours:this.hours,
            minutes:this.minutes,
            seconds:this.seconds,
        })
        window.localStorage.setItem(
          "Mycomments",
          JSON.stringify(this.Mycomments)
        );
        this.$router.push("/my")
        this.Toevaluated.splice(this.index,1)
        window.localStorage.setItem(
          "Toevaluated",
          JSON.stringify(this.Toevaluated)
        );
    }
  },
  created(){
    this.productId = this.$route.query.productId;
    this.productImg = this.$route.query.productImg;
    this.bigtitle = this.$route.query.bigtitle;
    this.index = this.$route.query.index;
    this.Toevaluated = JSON.parse(localStorage.getItem("Toevaluated"));
    
  },
  watch:{
    "value":function(){
        if(this.value==5){
            this.well="非常好"
        }else if(this.value==4){
            this.well="好"
        }else if(this.value==3){
            this.well="一般"
        }else if(this.value==2){
            this.well="差"
        }else if(this.value==1){
            this.well="非常差"
        }
    },
    "fileList":function(){
        console.log(this.fileList);
    }
  }
};
</script>

<style lang="scss" scoped>
.PublishComment {
    height: 100%;
    background-color: #f0eee2;
  .wrapper {
    min-width: 320px;
    max-width: 750px;
    margin: 0 auto;
    .header {
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      padding: 0 16px;
      position: sticky;
      left: 0;
      top: 0;
      z-index: 5;

      .header_left {
        color: #fc9632;
        font-size: 20px;
        line-height: 50px;
      }
      .header_center {
        font-size: 18px;
        padding-left: 32px;
      }
      .header_right {
        // width: 20px;
        padding: 5px 10px;
        color: #fff;
        border-radius: 15px;
        background-image: linear-gradient(90deg,#fc9632,#f95d25);
      }
    }
    .bodyer{
        background-color: #fff;
        margin: 50px 16px 16px;
        border-radius: 8px;
        position: relative;
        .img{
            position: absolute;
            left: 50%;
            top: 0;
            transform: translateX(-50%) translateY(-40%);
            width: 70px;
            height: 70px;
            img{
                border-radius: 10px;
                width: 100%;
                height: 100%;
            }
        }
        .bodyer_top{
            padding: 50px 50px 0;
            &>p{
                color: #999;
                font-size: 14px;
                line-height: 30px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                overflow: hidden;
            }
            .score{
                display: flex;
                justify-content: space-between;
                .star{
                    display: flex;
                }
                p{
                    color: #999;
                    font-size: 14px;
                }
            }
        }
        .bodyer_center{
            padding: 20px 16px;
            font-size: 14px;
            height: 160px;
            textarea {
                border: 0;
                width: 100%;
                height: 100%;
                resize: none;
            }
        }
        .bodyer_bottom{
           padding: 0 16px;
           .van-uploader ::v-deep .van-uploader__wrapper{
            justify-content: space-between;
           }
           .van-uploader ::v-deep .van-uploader__preview-image{
                width: 87px;
                height: 87px;
           }
           .van-uploader ::v-deep .van-uploader__upload{
                width: 87px;
                height: 87px;
           }
        }
    }
  }
}
</style>